<template>
    <n-modal
        v-model:show="show"
        :close-on-esc="false"
        :mask-closable="false"
        :trap-focus="false"
        transform-origin="center"
    >
        <div class="container-content">
            <div class="title-cnt" v-drag>
                <div class="tt">
                    {{ title }}
                    <span v-if="desc">({{ desc }})</span>
                </div>
                <i class="iconfont icon-close" @click="onClose"></i>
            </div>
            <div v-loading="isLoading" style="position: relative">
                <div class="content00" :class="{ resize: resize }">
                    <n-scrollbar
                        style="
                            max-height: calc(80vh - 24px);
                            box-sizing: border-box;
                        "
                    >
                        <slot />
                    </n-scrollbar>
                </div>
                <slot name="fixed" />
                <div class="footer-cnt" v-if="!hideFooter">
                    <n-button @click="onClose">取消</n-button>
                    <n-button type="primary" @click="onConfirm">确认</n-button>
                </div>
            </div>
        </div>
    </n-modal>
</template>
<script setup>
import { ref, computed, toRefs } from "vue";
const props = defineProps({
    show: {
        type: Boolean,
        default: () => false,
    },
    title: {
        type: String,
        default: () => "标题",
    },
    desc: {
        type: String,
        default: () => "",
    },
    hideFooter: {
        type: Boolean,
        default: () => true,
    },
    isLoading: {
        type: Boolean,
        default: () => false,
    },
    resize: {
        type: Boolean,
        default: () => false,
    },
    minWidth: {
        type: String,
        default: () => "300px",
    },
});

const emits = defineEmits(["close", "confirm"]);

//点击关闭按钮
const onClose = () => {
    emits("close");
};

//点击确认
const onConfirm = () => {
    emits("confirm");
};
</script>
<style lang="less" scoped>
.container-content {
    backdrop-filter: blur(1px);
    border-radius: 2px;
    overflow: hidden;
    background: var(--bg-color-1);
    // box-shadow: 3px 3px 2px var(--box-shadow-color);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    .title-cnt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        height: 42px;
        background: var(--bg-color-1);
        position: relative;
        &::after {
            position: absolute;
            content: "";
            bottom: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--text-color-base-2);
            transform: scaleY(0.2);
        }
        .tt {
            font-size: 16px;
            letter-spacing: 1px;
            span {
                font-size: 13px;
                color: var(--text-color-base-2);
                letter-spacing: 0;
            }
        }
        i {
            cursor: pointer;
            transition: all 0.25s ease-in-out;
            color: var(--text-color-base);
            padding: 2px;
            border-radius: 1px;
            line-height: 16px;
            &:hover {
                background: var(--bg-color-2);
            }
        }
    }
    .content00 {
        padding: 12px 16px;
        box-sizing: border-box;
        width: 600px;
        max-width: 80vw;
        min-width: 320px;
        max-height: 80vh;
        min-height: 120px;
        overflow: hidden;
        &.resize {
            resize: both;
        }
    }
    .modal-page-resize {
        font-size: 14px;
        position: absolute;
        bottom: -5px;
        right: 0;
        cursor: nw-resize;
    }
    .footer-cnt {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px 0;
        position: relative;
        &::after {
            position: absolute;
            content: "";
            top: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: #9b9b9b;
            transform: scaleY(0.2);
        }
        button {
            &:first-child {
                margin-right: 16px;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}
</style>
